<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title id="pageTitle">文章详情 - 我的个人博客</title>
    <link rel="stylesheet" href="assets/css/font-awesome.css">
    <link rel="stylesheet" href="assets/css/highlight.css">
    <script src="assets/js/highlight.min.js"></script>
    <script src="assets/js/marked.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            background: #f5f6fa;
        }

        /* 顶部导航 */
        .navbar {
            background: white;
            padding: 1rem 0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 1.5rem;
            font-weight: bold;
            color: #667eea;
            text-decoration: none;
        }

        .nav-back {
            color: #666;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            transition: color 0.3s;
        }

        .nav-back:hover {
            color: #667eea;
        }

        /* 主要内容 */
        .container {
            max-width: 900px;
            margin: 2rem auto;
            padding: 0 2rem;
        }

        .article-container {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }

        /* 文章头部 */
        .article-header {
            padding: 3rem 3rem 2rem;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            position: relative;
        }

        .article-cover {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 8px;
            margin-bottom: 2rem;
        }

        .article-title {
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 1rem;
            line-height: 1.2;
        }

        .article-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 2rem;
            align-items: center;
            font-size: 0.95rem;
            opacity: 0.9;
        }

        .meta-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .article-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-top: 1rem;
        }

        .tag {
            background: rgba(255,255,255,0.2);
            color: white;
            padding: 0.3rem 0.8rem;
            border-radius: 15px;
            text-decoration: none;
            font-size: 0.85rem;
            transition: all 0.3s;
        }

        .tag:hover {
            background: rgba(255,255,255,0.3);
            transform: translateY(-1px);
        }

        /* 文章内容 */
        .article-content {
            padding: 3rem;
            font-size: 1.1rem;
            line-height: 1.8;
        }

        .article-content h1,
        .article-content h2,
        .article-content h3,
        .article-content h4,
        .article-content h5,
        .article-content h6 {
            margin: 2rem 0 1rem;
            color: #2c3e50;
            font-weight: 600;
        }

        .article-content h1 { font-size: 2rem; }
        .article-content h2 { font-size: 1.7rem; }
        .article-content h3 { font-size: 1.4rem; }

        .article-content p {
            margin-bottom: 1.5rem;
        }

        .article-content ul, .article-content ol {
            margin: 1.5rem 0;
            padding-left: 2rem;
        }

        .article-content li {
            margin-bottom: 0.5rem;
        }

        .article-content blockquote {
            border-left: 4px solid #667eea;
            background: #f8f9fa;
            padding: 1rem 1.5rem;
            margin: 2rem 0;
            border-radius: 0 8px 8px 0;
        }

        .article-content code {
            background: #f1f2f6;
            padding: 0.2rem 0.4rem;
            border-radius: 4px;
            font-family: 'Courier New', monospace;
            color: #e74c3c;
        }

        .article-content pre {
            background: #2d3748;
            padding: 1.5rem;
            border-radius: 8px;
            overflow-x: auto;
            margin: 2rem 0;
        }

        .article-content pre code {
            background: none;
            padding: 0;
            color: #e2e8f0;
        }

        .article-content img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            margin: 2rem 0;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .article-content a {
            color: #667eea;
            text-decoration: none;
            border-bottom: 1px dotted #667eea;
            transition: all 0.3s;
        }

        .article-content a:hover {
            color: #5a6fd8;
            border-bottom: 1px solid #5a6fd8;
        }

        /* 文章底部 */
        .article-footer {
            padding: 2rem 3rem;
            background: #f8f9fa;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .article-actions {
            display: flex;
            gap: 1rem;
        }

        .action-btn {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.8rem 1.5rem;
            background: white;
            color: #666;
            text-decoration: none;
            border-radius: 25px;
            border: 2px solid #eee;
            transition: all 0.3s;
            cursor: pointer;
        }

        .action-btn:hover {
            border-color: #667eea;
            color: #667eea;
            transform: translateY(-2px);
        }

        .action-btn.liked {
            background: #ff6b8a;
            color: white;
            border-color: #ff6b8a;
        }

        .share-info {
            color: #888;
            font-size: 0.9rem;
        }

        /* 相关文章 */
        .related-section {
            margin-top: 3rem;
            padding: 2rem;
            background: white;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }

        .section-title {
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 1.5rem;
            color: #2c3e50;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .related-articles {
            display: grid;
            gap: 1rem;
        }

        .related-article {
            padding: 1rem;
            border: 1px solid #eee;
            border-radius: 8px;
            text-decoration: none;
            color: #333;
            transition: all 0.3s;
        }

        .related-article:hover {
            border-color: #667eea;
            box-shadow: 0 3px 10px rgba(102, 126, 234, 0.1);
        }

        .related-title {
            font-weight: bold;
            margin-bottom: 0.5rem;
        }

        .related-meta {
            font-size: 0.9rem;
            color: #666;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .container {
                padding: 0 1rem;
                margin: 1rem auto;
            }

            .nav-container {
                padding: 0 1rem;
            }

            .article-header {
                padding: 2rem;
            }

            .article-title {
                font-size: 2rem;
            }

            .article-content {
                padding: 2rem;
                font-size: 1rem;
            }

            .article-footer {
                padding: 1.5rem;
                flex-direction: column;
                align-items: flex-start;
            }

            .article-meta {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.5rem;
            }
        }

        /* 加载状态 */
        .loading {
            text-align: center;
            padding: 5rem 2rem;
            color: #666;
        }

        .loading i {
            font-size: 3rem;
            margin-bottom: 1rem;
            animation: spin 1s linear infinite;
            color: #667eea;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .error {
            text-align: center;
            padding: 5rem 2rem;
        }

        .error i {
            font-size: 4rem;
            color: #e74c3c;
            margin-bottom: 1rem;
        }

        .error-message {
            font-size: 1.2rem;
            color: #e74c3c;
            margin-bottom: 2rem;
        }

        .error-action {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 1rem 2rem;
            background: #667eea;
            color: white;
            text-decoration: none;
            border-radius: 25px;
            transition: all 0.3s;
        }

        .error-action:hover {
            background: #5a6fd8;
            transform: translateY(-2px);
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <nav class="navbar">
        <div class="nav-container">
            <a href="blog.html" class="logo">
                <i class="fas fa-blog"></i>
                我的博客
            </a>
            
            <a href="blog.html" class="nav-back">
                <i class="fas fa-arrow-left"></i>
                返回首页
            </a>
        </div>
    </nav>

    <!-- 主要内容 -->
    <div class="container">
        <!-- 文章容器 -->
        <article class="article-container" id="articleContainer">
            <!-- 加载状态 -->
            <div class="loading" id="loading">
                <i class="fas fa-spinner"></i>
                <p>正在加载文章...</p>
            </div>
        </article>

        <!-- 相关文章 -->
        <section class="related-section" id="relatedSection" style="display: none;">
            <h2 class="section-title">
                <i class="fas fa-book-open"></i>
                相关文章
            </h2>
            <div class="related-articles" id="relatedArticles">
                <!-- 相关文章列表 -->
            </div>
        </section>
    </div>

    <script>
        // API基础URL
        const API_BASE_URL = 'http://localhost:8080/api';
        
        // 当前文章ID
        let currentArticleId = null;
        let isLiked = false;

        // 页面加载时初始化
        window.addEventListener('load', function() {
            // 从URL获取文章ID
            const urlParams = new URLSearchParams(window.location.search);
            currentArticleId = urlParams.get('id');
            
            if (currentArticleId) {
                loadArticle(currentArticleId);
            } else {
                showError('文章ID参数缺失', '请检查链接是否正确');
            }
        });

        // 加载文章详情
        async function loadArticle(id) {
            try {
                const response = await fetch(`${API_BASE_URL}/blog/articles/${id}`);
                const result = await response.json();

                if (result.code === 0) {
                    const article = result.data;
                    renderArticle(article);
                    // 更新页面标题
                    document.getElementById('pageTitle').textContent = `${article.title} - 我的个人博客`;
                    document.title = `${article.title} - 我的个人博客`;
                } else {
                    showError('文章加载失败', result.message || '文章不存在或已被删除');
                }

            } catch (error) {
                console.error('加载文章失败:', error);
                showError('网络错误', '无法连接到服务器，请检查网络连接');
            }
        }

        // 渲染文章内容
        function renderArticle(article) {
            const container = document.getElementById('articleContainer');
            
            // 处理Markdown内容 - 兼容不同版本的marked.js
            let contentHtml;
            try {
                // 尝试新版本API
                if (typeof marked.parse === 'function') {
                    contentHtml = marked.parse(article.content || '暂无内容');
                } else if (typeof marked === 'function') {
                    // 使用旧版本API
                    contentHtml = marked(article.content || '暂无内容');
                } else {
                    // 如果marked未正确加载，显示原始内容
                    contentHtml = `<pre>${article.content || '暂无内容'}</pre>`;
                }
            } catch (error) {
                console.error('Markdown渲染失败:', error);
                // 如果渲染失败，显示原始内容
                contentHtml = `<pre>${article.content || '暂无内容'}</pre>`;
            }
            
            container.innerHTML = `
                <div class="article-header">
                    ${article.coverImage ? `<img src="${article.coverImage}" alt="${article.title}" class="article-cover">` : ''}
                    <h1 class="article-title">${article.title}</h1>
                    <div class="article-meta">
                        <div class="meta-item">
                            <i class="fas fa-user"></i>
                            <span>${article.author ? article.author.username : '未知作者'}</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-calendar"></i>
                            <span>${formatDate(article.publishTime)}</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-eye"></i>
                            <span>${article.viewCount || 0} 次阅读</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-heart"></i>
                            <span>${article.likeCount || 0} 次点赞</span>
                        </div>
                        ${article.category ? `
                        <div class="meta-item">
                            <i class="fas fa-folder"></i>
                            <span>${article.category.name}</span>
                        </div>
                        ` : ''}
                    </div>
                    ${article.tags && article.tags.length > 0 ? `
                    <div class="article-tags">
                        ${article.tags.map(tag => `
                            <a href="blog.html" class="tag">${tag.name}</a>
                        `).join('')}
                    </div>
                    ` : ''}
                </div>
                
                <div class="article-content">
                    ${article.summary ? `
                    <div style="background: #f0f8ff; padding: 1.5rem; border-radius: 8px; margin-bottom: 2rem; border-left: 4px solid #667eea;">
                        <strong style="color: #667eea;">文章摘要：</strong><br>
                        ${article.summary}
                    </div>
                    ` : ''}
                    ${contentHtml}
                </div>
                
                <div class="article-footer">
                    <div class="article-actions">
                        <button class="action-btn" onclick="likeArticle()" id="likeBtn">
                            <i class="fas fa-heart"></i>
                            <span id="likeText">点赞</span>
                            <span id="likeCount">(${article.likeCount || 0})</span>
                        </button>
                        <button class="action-btn" onclick="shareArticle()">
                            <i class="fas fa-share"></i>
                            分享
                        </button>
                    </div>
                    <div class="share-info">
                        <i class="fas fa-link"></i>
                        <span>分享这篇文章</span>
                    </div>
                </div>
            `;
            
            // 代码高亮
            setTimeout(() => {
                hljs.highlightAll();
            }, 100);
        }

        // 文章点赞
        async function likeArticle() {
            if (isLiked) return;
            
            try {
                const response = await fetch(`${API_BASE_URL}/blog/articles/${currentArticleId}/like`, {
                    method: 'POST'
                });
                const result = await response.json();

                if (result.code === 0) {
                    isLiked = true;
                    const likeBtn = document.getElementById('likeBtn');
                    const likeText = document.getElementById('likeText');
                    const likeCount = document.getElementById('likeCount');
                    
                    likeBtn.classList.add('liked');
                    likeText.textContent = '已点赞';
                    
                    // 更新点赞数
                    const currentCount = parseInt(likeCount.textContent.replace(/[()]/g, '')) || 0;
                    likeCount.textContent = `(${currentCount + 1})`;
                    
                } else {
                    alert('点赞失败：' + result.message);
                }

            } catch (error) {
                console.error('点赞失败:', error);
                alert('点赞失败，请稍后再试');
            }
        }

        // 分享文章
        function shareArticle() {
            const url = window.location.href;
            const title = document.title;
            
            if (navigator.share) {
                navigator.share({
                    title: title,
                    url: url
                }).catch(err => console.log('分享失败:', err));
            } else {
                // 复制链接到剪贴板
                navigator.clipboard.writeText(url).then(() => {
                    alert('文章链接已复制到剪贴板');
                }).catch(() => {
                    // 降级方案
                    const textarea = document.createElement('textarea');
                    textarea.value = url;
                    document.body.appendChild(textarea);
                    textarea.select();
                    document.execCommand('copy');
                    document.body.removeChild(textarea);
                    alert('文章链接已复制到剪贴板');
                });
            }
        }

        // 显示错误页面
        function showError(title, message) {
            document.getElementById('articleContainer').innerHTML = `
                <div class="error">
                    <i class="fas fa-exclamation-triangle"></i>
                    <div class="error-message">${title}</div>
                    <p style="color: #666; margin-bottom: 2rem;">${message}</p>
                    <a href="blog.html" class="error-action">
                        <i class="fas fa-home"></i>
                        返回首页
                    </a>
                </div>
            `;
        }

        // 格式化日期
        function formatDate(dateString) {
            if (!dateString) return '未知日期';
            
            const date = new Date(dateString);
            const options = {
                year: 'numeric',
                month: 'long',
                day: 'numeric',
                hour: '2-digit',
                minute: '2-digit',
                weekday: 'long'
            };
            
            return date.toLocaleDateString('zh-CN', options);
        }

        // 平滑滚动
        document.addEventListener('DOMContentLoaded', function() {
            // 为页面内锚点链接添加平滑滚动
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function(e) {
                    e.preventDefault();
                    const target = document.querySelector(this.getAttribute('href'));
                    if (target) {
                        target.scrollIntoView({
                            behavior: 'smooth',
                            block: 'start'
                        });
                    }
                });
            });
        });
    </script>
</body>
</html>
